<template>
  <div class="navbar-wrapper">
    <el-container class="navbar-container">
      <el-header class="header-bar">
        <div class="left-area" @click="goHome">
          <img src="/logo.png" alt="论坛Logo" class="logo-img" />
        </div>

        <div class="middle-area">
          <el-menu
            mode="horizontal"
            @select="handleMenu"
            class="nav-menu"
            background-color="transparent"
            text-color="#333"
            active-text-color="#409EFF"
            :ellipsis="false"
          >
            <el-menu-item index="home">帖子总览</el-menu-item>
            <el-menu-item index="qna">问答模块</el-menu-item>
            <el-menu-item index="my-posts">我的帖子</el-menu-item>
            <el-menu-item index="category">知识分类</el-menu-item>
          </el-menu>
        </div>

        <div class="right-area">
        <!-- 未登录：显示“登录”链接 -->
        <template v-if="!user">
            <el-button type="primary" @click="router.push('/login')">登录</el-button>
        </template>

        <!-- 已登录：显示发布下拉 + 头像 -->
        <template v-else>
            <el-dropdown trigger="click">
            <el-button circle>
                <el-icon><Plus /></el-icon>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                <el-dropdown-item @click.native="router.push('/post/create')">发布帖子</el-dropdown-item>
                <el-dropdown-item @click.native="router.push('/ask-question')">发起提问</el-dropdown-item>
                </el-dropdown-menu>
            </template>
            </el-dropdown>

            <el-avatar
            :src="user.avatar || defaultAvatar"
            class="avatar"
            @click="router.push('/user/profile')"
            />
        </template>
        </div>

      </el-header>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { Plus } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const user = computed(() => userStore.user)
const defaultAvatar = '/default-avatar.png'

// 不再维护 activeMenu，仅根据 index 跳转
const handleMenu = (index) => {
  if (index === 'home') router.push('/home')
  if (index === 'qna') router.push('/qna')
  if (index === 'my-posts') router.push('/user/posts')
  if (index === 'category') router.push('/categories')
}

const goHome = () => {
  router.push('/home')
}
</script>

<style scoped>
.navbar-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  height: 60px;
}

.logo-img {
  height: 40px;
  cursor: pointer;
}

.middle-area {
  flex: 1;
  margin-left: 40px;
}

.nav-menu {
  border: none;
}

.right-area {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  cursor: pointer;
}
</style>
